<!--  -->
<template>
  <div :class="buttonType == 2 ? 'odc-ui-iconbutton-box' : 'odc-ui-textbutton-box'
    ">
    <template v-if="buttonType == 2">
      <!--新增按钮-->
      <!--<el-tooltip v-if="btnType=='addBtn'" ::content="$t('common.addBtn')" placement="top">-->
      <el-button v-if="btnType == 'addBtn'" type="primary" icon="el-icon-plus" @click="create">{{ $t("common.addBtn")
      }}</el-button>
      <!--</el-tooltip>-->
      <!--自定义类似新增格式的按钮-->
      <!--<el-tooltip v-if="btnType=='cusBtn'" :::content="curTextTip" placement="top">-->
      <el-button v-if="btnType == 'cusBtn'" :loading="curLoading" :type="curBtnColor" :icon="curIcon" @click="create">{{
        curText }}</el-button>
      <!--</el-tooltip>-->
      <!--编辑删除按钮-->
      <el-tooltip v-if="btnType == 'editBtn'" :content="$t('common.edit')" placement="top">
        <el-button v-if="btnType == 'editBtn'" class="table-colum-operate" type="primary" @click="editBtnClick">
          <i class="el-icon-edit"></i>
        </el-button>
      </el-tooltip>
      <!--详情按钮-->
      <el-tooltip v-if="btnType == 'detailBtn'" :content="$t('common.detail')" placement="top">
        <el-button v-if="btnType == 'detailBtn'" class="table-colum-operate" type="primary">
          <i class="el-icon-zoom-in"></i>
        </el-button>
      </el-tooltip>
      <!--删除按钮-->
      <el-tooltip v-if="btnType == 'deleteBtn'" :content="$t('common.delete')" placement="top">
        <el-button v-if="btnType == 'deleteBtn'" class="table-colum-operate" type="danger">
          <i class="el-icon-delete"></i>
        </el-button>
      </el-tooltip>
      <!--类似编辑样式的自定义按钮-->
      <el-tooltip v-if="btnType == 'cusBtnNoText'" :content="curTextTip" placement="top">
        <el-button plain class="table-colum-operate" :type="curBtnColor">
          <slot></slot>
        </el-button>
      </el-tooltip>
    </template>
    <template v-else>
      <!--新增按钮-->
      <el-button v-if="btnType == 'addBtn'" type="primary" icon="el-icon-plus" @click="create">{{ $t("common.addBtn")
      }}</el-button>
      <!--自定义类似新增格式的按钮-->
      <el-button v-if="btnType == 'cusBtn'" :loading="curLoading" :type="curBtnColor" :icon="curIcon" @click="create">{{
        curText }}</el-button>
      <!--编辑删除按钮-->
      <el-button v-if="btnType == 'editBtn'" class="table-colum-operate" type="primary" @click="editBtnClick">
        {{ $t("common.edit") }}
      </el-button>
      <!--详情按钮-->
      <el-button v-if="btnType == 'detailBtn'" class="table-colum-operate" type="primary">
        {{ $t("common.detail") }}
      </el-button>
      <!--删除按钮-->
      <el-button v-if="btnType == 'deleteBtn'" class="table-colum-operate" type="danger">
        {{ $t("common.delete") }}
      </el-button>
      <!--类似编辑样式的自定义按钮-->
      <el-button v-if="btnType == 'cusBtnNoText'" class="table-colum-operate" :type="curBtnColor">
        {{ curTextTip }}
      </el-button>
    </template>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  props: {
    btnType: {
      type: String,
      default: "addBtn",
      required: false,
    },
    curIcon: {
      type: String,
      default: "",
      required: false,
    },
    curText: {
      type: String,
      default: "",
      required: false,
    },
    curTextTip: {
      type: String,
      default: "",
      required: false,
    },
    curBtnColor: {
      type: String,
      default: "primary",
      required: false,
    },
    curLoading: {
      type: Boolean,
      default: false,
      required: false,
    },
    buttonType: {
      type: Number,
      default: 1,
      required: true,
    },
  },
  data() {
    // 这里存放数据
    return {}
  },
  // 方法集合
  methods: {
    create() {
      this.$emit("create");
    },
    editBtnClick() {
      this.$emit("editBtnClick");
    },
  }
};
</script>
<style scoped>
.odc-ui-textbutton-box {
  margin-top: 0;
  margin-bottom: 0;
}

.odc-ui-iconbutton-box {
  margin-top: 0;
  margin-bottom: 0;
}

.table-colum-operate {
  padding: 4px 6px !important;
  height: 28px;
  min-width: 28px;
  font-size: 12px;
}

.el-icon {
  font-size: 12px;
}
</style>